<template>
  <div>
    <ul>
        <li v-for="(item,index) in arr" :key="index">{{item}}</li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
    name:'App',
    data(){
        return {
            arr:[1,2,3,4]
        }
    },
    methods:{
        /**
         *  1. vue渲染更新都是异步进行的，如果有数据变更，统一变更之后，在进行render
         *  2. $nextTick: 在下一个事件循环执行。==> 在vdom渲染成真实dom后，调用
         */
        add(){
            // vue是异步渲染的
            // setState
            this.arr.push(Date.now())
            this.arr.push(Date.now())
            this.arr.push(Date.now())
            // 
            // console.log('li length: ',document.querySelectorAll('li').length)
            // 当数据变化之后，导致dom更新，我们希望获取最新的dom结构， $nextTick
            // nextTick中的回调函数，vdom渲染成真实dom之后触发执行
            this.$nextTick(()=>{
                // console.log(this.arr)
                console.log('li length: ',document.querySelectorAll('li').length)
            })
        }
    },
    updated(){
        console.log('updated')
    }
}
</script>

<style>

</style>